<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATICS__/css/css.css" rel="stylesheet" type="text/css" />
<link href="__STATICS__/css/common.css" rel="stylesheet" tyle="text/css" />
<script src="__STATICS__/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="__STATICS__/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="__STATICS__/js/common_js.js" type="text/javascript"></script>
<title>用户注册</title>
</head>
<style>
    .weak{background: #aaa}
    .medium{background: #aaa}
    .strong{background: #aaa}
</style>
<body>
<!--顶部样式-->
<div class="common_top">
 <div class="Narrow">
  <div class=" left logo"><a href="#"><img src="__STATICS__/images/logo.png" /></a></div>
  <!--电话图层-->
  <div class="phone"><label>全国服务热线：</label><em>400-345-5633</em></div>
 </div>
</div>
<!--用户注册样式-->
<div class="registered_style Narrow clearfix">
   <div class="left_advertising">
    <img src="__STATICS__/images/bg_03.png" />
   </div>
   <div class="right_register">
     <div class="register_Switching" id="register_Switching">
       <div class="hd">
        <ul><li>快速注册</li><li>普通注册</li></ul>
       </div>
       <div class="bd">
        <ul>
         <form id="form1" name="form1" method="post" action="{:url('phoneLogin')}"> 
	   <div class="form clearfix">	
        <div class="item"><label class="rgister-label">手&nbsp;&nbsp;机&nbsp;&nbsp;号：</label><input name="phone" type="text"  class="text" /></div>
        <div class="item"><label class="rgister-label" >验&nbsp;&nbsp;证&nbsp;&nbsp;码：</label><input name="phonecode" type="text" id="phonecode" class="text" /><button class="phone_verification" type="button" name="button">获取验证码</button></div> 
        <div class="item-ifo">
                    <input type="checkbox" class="checkbox left" checked="checked" id="readme" onclick="agreeonProtocol();">
                    <label for="protocol" class="left">我已阅读并同意<a href="#" class="blue" id="protocol">《福际商城用户注册协议》</a></label>
                </div>
       </div>
       <div class="rgister-btn">
	  <button class="btn_rgister" type="submit" style="border: none">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
	  </div>
	  <div class="Note"><span class="login_link">已是会员<a href="{:url('login')}">请登录</a></span></div>	  
       </form>
        </ul>
        <ul>
        <form id="form1" name="form1" method="post" action="{:url('insert')}"> 
	   <div class="form clearfix">	
	    <div class="item"><label class="rgister-label">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label><input name="user" type="text" id="member" class="text" /><b class="dot-1">*</b></div>
		<div class="item"><label class="rgister-label" >密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input name="pwd" type="password"  class="text" id="pass"/><b class="dot-2">*</b></div> 
	    <div class="Password_qd" ><ul><li id="r">弱</li><li id="z">中</li><li id="q">强</li></ul></div>
		<div class="item"><label class="rgister-label " >确认密码：</label><input name="repwd" type="password" id="repwd" class="text" /><b class="dot-3">*</b></div>
	    <div class="item"><label class="rgister-label" >电子邮箱：</label><input name="email" type="text" id="email" class="text" /><b class="dot-4">*</b></div> 
	 
	    <div class="item "><label  class="rgister-label ">验&nbsp;证&nbsp;码：</label><input name="code" type="text"  class="Recommend_text" /><img src="{:url('code')}" alt="captcha" onclick="img(this)" /></div>
		<div class="item-ifo">
                    <input type="checkbox" class="checkbox left" checked="checked" id="readme" onclick="agreeonProtocol();">
                    <label for="protocol" class="left">我已阅读并同意<a href="#" class="blue" id="protocol">《福际商城用户注册协议》</a></label>
                </div>
	  </div>	
	  <div class="rgister-btn">
            <button class="btn_rgister" type="submit" style="border: none">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
	  </div>
	  <div class="Note"><span class="login_link">已是会员<a href="{:url('login')}">请登录</a></span></div>	  
	  </form>
        </ul>
       </div>
     </div>
     <script>jQuery(".register_Switching").slide({trigger:"click"});</script>
    </div>
</div>
<!--底部样式-->
 <div class="bottom_footer">
   <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">法律申明</a> | <a href="#">友情链接</a>  </p>
	 <p>Copyright©2014四川金祥保险销售有限公司.All Rights Reserved. </p>
	 <p>川ICP备09150084号</p>
   </div>
</body>
</html>
<script>
    $('#member').keyup(function(){
        var user = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,20}$", "g");
        if (!$('#member').val()==""&&!user.test($('#member').val())){
            $('.dot-1').html("长度只能有6-20位");
        }
        else if ($('#member').val()==""){
            $('.dot-1').html("*");
        }
        else {
            $('.dot-1').html("");
        } 
    })
    $('#email').keyup(function(){
        var email = new RegExp("^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$", "g");
        if ($('#email').val()==""){
            $('.dot-4').html("*");
        }
        else if (false == email.test($('#email').val())){
            $('.dot-4').html("");
        }
        else {
            $('.dot-4').html("邮箱格式不正确");
        } 
        return true;
    })
    $('#repwd').keyup(function(){
        if ($('#repwd').val()=="") {
            $('.dot-3').html("*");
        }
        else if ($('#repwd').val()!=$('#pass').val()) {
            $('.dot-3').html("确认密码不一致");
        }
        else {
            $('.dot-3').html("");
        }
        
        
    })    
    
    $('#pass').keyup(function () { 
        var str = $(this).val();
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
        var enoughRegex = new RegExp("(?=.{6,}).*$", "g"); 
        if ($('#pass').val()=="") {
            $('#r').removeClass('weak');
            $('#z').removeClass('medium');
            $('#q').removeClass('strong');
            $('#r').removeClass('r');
            $('#z').removeClass('z');
            $('#q').removeClass('q');
            $('.dot-2').html("*");
        } 
        else if (false == enoughRegex.test(str)) { 
            $('#r').removeClass('weak');
            $('#z').removeClass('medium');
            $('#q').removeClass('strong');
            $('#r').removeClass('r');
            $('#z').removeClass('z');
            $('#q').removeClass('q');
            $('#r').addClass('weak');
            $('#z').addClass('medium');
            $('#q').addClass('strong');
            $('.dot-2').html("");
            //密码小于六位的时候，密码强度图片都为灰色 
        } 
        else if (strongRegex.test(str)) {
            $('#r').removeClass('weak');
            $('#z').removeClass('medium');
            $('#q').removeClass('strong');
            $('#r').removeClass('r');
            $('#z').removeClass('z');
            $('#q').removeClass('q'); 
            $('#r').addClass('r');
            $('#z').addClass('z');
            $('#q').addClass('q'); 
            $('.dot-2').html("");
            //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强（有大写字母）
        } 
        else if (mediumRegex.test(str)) { 
            $('#r').removeClass('weak');
            $('#z').removeClass('medium');
            $('#q').removeClass('strong');
            $('#r').removeClass('r');
            $('#z').removeClass('z');
            $('#q').removeClass('q');
            $('#r').addClass('r');
            $('#z').addClass('z');
            $('#q').addClass('strong'); 
            $('.dot-2').html("");
            //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
        }
        else { 
            $('#r').removeClass('weak');
            $('#z').removeClass('medium');
            $('#q').removeClass('strong');
            $('#r').removeClass('r');
            $('#z').removeClass('z');
            $('#q').removeClass('q');
            $('#r').addClass('r');
            $('#z').addClass('medium');
            $('#q').addClass('strong'); 
            $('.dot-2').html("");
            //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
        } 
        return true; 
    }); 
    function img(obj){
            var timestamp = new Date().getTime();
            obj.src=obj.src+'?'+timestamp;
        }
    var T;
    $('button[name="button"]').click(function(){
       
        $('button[name="button"]').html("<b>10</b>s再获取");
        $('button[name="button"]').prop('disabled',true);
        T=setInterval(daojishi,1000);
        $.ajax({
                'data':'phone='+$('input[name="phone"]').val(),
                'url':'{:url("curl")}',
                success:function(res){
                    alert(res)
                }
            })
        
    })
    function daojishi(){
        var num = $('button[name="button"] b').html();
        if(num<=1){
            $('button[name="button"]').html("获取验证码");
            $('button[name="button"]').prop('disabled',false);
            clearInterval(T);
        }
        num--;
        $('button[name="button"] b').html(num);
    }
</script>